<template>
  <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
    <div slot="common-search">
      <div class="common-btn" style="border-bottom:none;">
        <el-button type="primary" size="mini" @click="addHandleClick()">添加</el-button>
      </div>
    </div>
    <div slot="common-body">
      <el-table :data="tableData" border size="mini" style="width: 100%">
        <el-table-column prop="name" width="" label="角色名称">
        </el-table-column>
        <el-table-column prop="remark" label="角色说明">
        </el-table-column>
        <el-table-column prop="address" label="操作" style="width:19%;">
          <template slot-scope="scope">
            <el-button @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteHandleClick(scope.row.id,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <common-dialog title="添加" :base-dialog="roleDialog">
        <div slot="body">
          <el-form :model="role_base_dialog" :rules="rules" ref="role_base_dialog" size="mini" label-width="80px" slot="body">
            <el-form-item label="角色名称" prop="role_name">
              <el-input v-model="role_base_dialog.role_name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色说明" prop="role_desc">
              <el-input type="textarea" v-model="role_base_dialog.role_desc" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限配置">
              <el-tree :data="allMenu" show-checkbox node-key="code" :accordion="true" ref="tree" highlight-current :props="defaultProps">
              </el-tree>
            </el-form-item>
            <el-form-item label="" style="width:400px;">
              <el-button type="primary" @click="addAndEditMenu('role_base_dialog')">确定</el-button>
              <el-button type="primary" @click="cancelDialog('role_base_dialog')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </common-dialog>
    </div>
    <div slot="common-page">
      <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
    </div>
  </common-container>
</template>
<script>
import pagePagination from "@/components/Common/pagePagination";
import { mapGetters } from "vuex";
import commonDialog from "@/components/Common/CommonDialog";
import server from "@/service/index";
import commonContainer from "@/components/Common/CommonContainer";
export default {
   props: ['breadcrumb'],
  data() {
    return {
      loading: true,
      page: 1,
      pageSize: 10,
      total: 0,
      allMenu: [],
      tableData: [],
      roleDialog: false,
      defaultProps: {
        children: "childList",
        label: "name"
      },
      role_base_dialog: {
        role_id: "",
        role_name: "",
        role_desc: "",
        role_auth: ""
      },
      rules: {
        role_name: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        role_desc: [
          { required: true, message: "请输入角色说明", trigger: "blur" }
        ]
      }
    };
  },
   created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
    },
  mounted() {
    this.queryServerRolesList();
  },
  methods: {
    //添加
    addHandleClick() {
      this.roleDialog = true;
      this.queryRolesMenuList();
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys([]);
      }, 500)
    },
    async queryRolesMenuList() {
      let res = await server.haibeiQueryAllMenuItem();
      if (res.success) {
        this.allMenu = res.result.data;
      }
    },
    //编辑
    editHandleClick(item) {
      this.roleDialog = true;
      this.role_base_dialog.role_id = item.id;
      this.role_base_dialog.role_name = item.name;
      this.role_base_dialog.role_desc = item.remark;
      this.queryRolesMenuList();
      setTimeout(() => {
        let menusO = [];
        let auths = item.auths.split(";");
        // console.log(auths);
        for (let ite of auths) {
          if (ite !== "") {
            menusO = [...menusO, ite];
          }
        }
        console.log(menusO);
        this.$refs.tree.setCheckedKeys(menusO);
      }, 500);
    },
    // submit button
    addAndEditMenu(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitData(formName);
        }
      });
    },
    async submitData(formName) {
      let mid = this.role_base_dialog.role_id;
      let auth = this.$refs.tree.getCheckedKeys();
      if (auth.length == 0) {
        this.$message({
          type: "error",
          message: "请分配权限!"
        });
        return;
      }
      let params = {
        name: this.role_base_dialog.role_name,
        remark: this.role_base_dialog.role_desc,
        auths: auth.toString()
      };
      let res = null;
      if (mid) {
        params.id = mid;
        res = await server.haiheiServerEditRolesList(params);
      } else {
        res = await server.haiheiServerAddRolesList(params);
      }
      if (res.success) {
        this.$message({
          type: "success",
          message: res.msg
        });
        this.roleDialog = false;
        this.$refs[formName].resetFields();
        this.queryServerRolesList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    cancelDialog(formName) {
      this.roleDialog = false;
      this.role_base_dialog.role_id = "";
      this.role_base_dialog.role_name = "";
      this.role_base_dialog.role_desc = "";
      this.$refs[formName].resetFields();
    },
    // 删除
    deleteHandleClick(id, index) {
      this.$confirm("您确定删除该条数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false,
        type: 'warning'
      }).then(() => {
          server.haiheiServerDeleteRolesList({ id }).then(res => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.queryServerRolesList();
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        }).catch(() => { });
    },
    //分页
    pageFunNumber(page) {
      this.queryServerRolesList(page);
    },
    // 查询列表
    async queryServerRolesList(page = 1) {
      let res = await server.haiheiServerRolesList({
        page: page,
        pageSize: this.pageSize
      });
      this.loading = true;
      if (res.success) {
        this.loading = false;
        this.tableData = res.result.pageList;
        this.total = res.result.nums;
        this.page = res.result.page;
        this.pageSize = res.result.pageSize;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
        this.loading = false;
        return;
      }
    }
  },
  components: {
    commonDialog,
    pagePagination,
    commonContainer
  }
};
</script>
